<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg id="svg" viewBox="0 0 100 100" width="400" height="200" style="border:4px solid #66f;" 
        preserveAspectRatio="none"
    ></svg>
  </body>
  <script>
    //绘制200*200坐标系
    const svg = document.querySelector("#svg");
    const NS = "http://www.w3.org/2000/svg";
    const path = document.createElementNS(NS, "path");
    svg.appendChild(path);
    let d = "";
    for (let i = 0; i <= 20; i++) {
      d += `M${i * 10} 0 V200`;
      d += `M0 ${i * 10} H200`;
      const text1 = document.createElementNS(NS, "text");
      text1.innerHTML = i;
      text1.setAttribute("font-size", 4);
      text1.setAttribute("x", i * 10-3);
      text1.setAttribute("y", 4);
      svg.appendChild(text1);

      const text2 = document.createElementNS(NS, "text");
      text2.innerHTML = i;
      text2.setAttribute("font-size", 4);
      text2.setAttribute("x", 0);
      text2.setAttribute("y", i*10);
      svg.appendChild(text2);
    }
    
    path.setAttribute("d", d);
    path.setAttribute("fill", "none");
    path.setAttribute("stroke", "#ccc");
    path.setAttribute("stroke-width", 1);
    
  </script>
</html>
